/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

.Panel-main {
    line-height: $global-condensed_lineHeight;

    @include maxWidth($theme-breakpoint_tablet) {
        .SearchBox,
        .BoxCategories {
            display: none;
        }

        .BoxNewDiscussion.BoxNewDiscussion {
            margin: $utility-baseUnitTriple 0;
            text-align: center;
        }

        .ButtonGroup.Multi,
        .BigButton {
            margin-left: auto;
            margin-right: auto;

            @include maxWidth(500px) {
                max-width: 100%;
            }
        }

        .Box h4 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            @if ($staticVariables) {
                font-size: $global-subTitle_fontSize;
                font-weight: $global-heading_fontWeight;
                color: $global-color_fg;
            }
        }
    }

    .SocialIcon,
    .ApplyButton,
    .Button.Primary {
        display: inline-flex;
        justify-content: center;
    }

    .TagCloud {
        background: transparent;

        li {
            padding: 0;
            background: transparent;
        }
    }
}

.Panel-header {
    display: none;
}

.Panel {
    @if ($staticVariables) {
        width: $panel_width;
        background: $panel_bg;
        padding: $panel_padding;
        border: $panel_border;
        border-radius: $panel_borderRadius;

        @if ($panel_toLeft != true) {
            margin-left: auto;
        }
    }

    @include maxWidth($theme-breakpoint_tablet) {
        width: 100%;
    }

    h4 {
        @if ($staticVariables) {
            font-weight: bold;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        @if ($staticVariables) {
            padding: $panel-item_padding;
        }
        margin-bottom: 0;

        .Count {
            margin-right: 6px;
            margin-bottom: -3px;
        }
    }

    .PanelInfo li {
        padding: 0;
    }

    .vanilla-connect {
        a {
            display: inline-flex;
        }

        .Button + .Button {
            margin-top: 3px;
        }
    }

    .BoxButtons .Button:not(.Handle) {
        width: 100%;
        padding: 0;
    }

    .BoxButtons {
        margin: 0 0 $utility-baseUnitTriple;
    }

    .PhotoWrap {
        height: 24px;
        width: 24px;
    }

    .PhotoWrapLarge {
        width: $panel_width;
        height: $panel_width;
        border-radius: 0;
        position: relative;
        overflow: hidden;

        img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            min-width: 50%;
            min-height: 50%;
        }

        &:hover {
            a.ChangePicture {
                z-index: 1;
                display: block;
            }
        }
    }

    .PanelInThisDiscussion {
        a {
            @if ($staticVariables) {
                padding: $panel-item_padding;
            }
            border: $panel-item_border;
            border-radius: $panel_item-borderRadius;
            width: 100%;

            @if ($staticVariables) {
                color: $panel_fg;
                background-color: $panel-item_bg;
            }

            display: block;
            border: $panel-item_border;
            transition: transition(color), transition(background-color);

            @if ($staticVariables) {
                &:hover,
                &:focus,
                &:active {
                    color: $panel-item-hover_fg;
                    background-color: $panel-item-hover_bg;
                    border-color: $panel-item-hover_border;
                }
            }
        }
    }

    .Leaderboard,
    .InThisConversation {
        @if ($staticVariables) {
            li:not(.Heading) + li:not(.Heading) {
                margin-top: $panel_item-spacing;

                @if ($panel-item_spacing == 0) {
                    a {
                        margin-top: -1px;
                    }
                }
            }
        }

        a {
            @if ($staticVariables) {
                padding: $panel-item_padding;
            }
            border: $panel-item_border;
            border-radius: $panel_item-borderRadius;
            width: 100%;
            @if ($staticVariables) {
                color: $panel_fg;
                background-color: $panel-item_bg;
                border: $panel-item_border;
            }
            transition: transition(color), transition(background-color);

            @if ($staticVariables) {
                &:hover,
                &:focus,
                &:active {
                    color: $panel-item_fg;
                    background-color: $panel-item-hover_bg;
                    border-color: $panel-item-hover_border;
                }
            }
        }

        .ProfilePhoto.ProfilePhoto {
            @include photoWrap;

            width: $theme-photo-small_size;
            height: $theme-photo-small_size;
        }

        .Username {
            display: inline-block;
            margin-left: 10px;
            line-height: $theme-photo-small_size;

            @if ($staticVariables) {
                &:focus,
                &:hover,
                &:active {
                    color: $panel-item-hover_fg;
                }
            }
        }

        .Conversation-User {
            display: flex;
        }
    }
}

.Box {
    li,
    li:first-child {
        border: none;
    }
}

body.Section-EditProfile .Box,
.BoxFilter:not(.BoxBestOfFilter),
.BoxCategories.BoxCategories {
    @if ($staticVariables) {
        .PanelCategories li {
            padding: 0;

            &.Depth2,
            &.Depth3,
            &.Depth4,
            &.Depth5 {
                position: relative;

                a {
                    padding-left: 24px;
                }

                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 7px;
                    top: 50%;
                    width: 6px;
                    height: 6px;
                    border-bottom: 2px solid mix($global-color_fg, $global-color_white, 20%);
                    border-left: 2px solid mix($global-color_fg, $global-color_white, 20%);
                    transform: translateY(-50%);
                    z-index: 1;
                }
            }
        }
    }

    li {
        border-radius: $formElement_borderRadius;
    }

    @if ($staticVariables) {
        li:not(.Heading) + li:not(.Heading) {
            margin-top: $panel_item-spacing;

            @if ($panel-item_spacing == 0) {
                a {
                    margin-top: -1px;
                }
            }
        }
    }

    li.Heading {
        display: flex;
        align-items: center;

        @if ($staticVariables) {
            padding: $panel-item_padding;
            border: $panel-item_border;
            border-radius: $panel_item-borderRadius;
            color: $panel_fg;
            font-weight: $global-semibold_fontWeight;
        }

        .Aside {
            order: 2;
            margin-left: auto;
        }
    }

    a {
        display: flex;
        align-items: center;
        padding: $panel-item_padding;
        border: $panel-item_border;
        @if ($staticVariables) {
            border-radius: $panel_item-borderRadius;
        }
        width: 100%;
        @if ($staticVariables) {
            color: $panel_fg;
            background-color: $panel-item_bg;
            transition: transition(color), transition(background-color);
        }
        border: $panel-item_border;

        @if ($staticVariables) {
            &:hover,
            &:focus,
            &:active {
                color: $panel-item-hover_fg;
                background-color: $panel-item-hover_bg;
                border-color: $panel-item-hover_border;
            }
        }
    }

    @if ($staticVariables) {
        li:not(.Heading) + li:not(.Heading) {
            @if ($panel-item_spacing == 0) {
                a {
                    margin-top: -1px;
                }
            }
        }
    }

    &.BadgeGrid a {
        width: auto;
        border-radius: 0;
        padding: 0;
    }

    @if ($staticVariables) {
        .Active {
            a {
                font-weight: $global-semibold_fontWeight;
            }
        }
    }
}

.WhosOnline.Box {
    .PhotoWrap.PhotoWrap {
        display: inline-block;
        margin: 0 2px 2px 2px;
        @include photoWrap;
        min-height: 0;
        width: $theme-photo-small_size;
        height: $theme-photo-small_size;
    }
}

.PhotoGrid {
    margin: 0 -2px;
    width: calc(100% + 4px);
}
